import React, { Component, Fragment } from 'react'
import { connect } from 'react-redux'
import imgs from '../../../static/home/1.png'
import {
  RightWrapper,
  TalkWrapper,
  TalkItem,
} from '../style'


class Talk extends Component {
  constructor(props) {
    super(props)
    this.state = {
      show: true,
      roate: true,
    }
  }
  render() {
    const { show, roate } = this.state
    return (
      <Fragment>
        {
          show ?
            <RightWrapper>
              <p className="title talk" >
                <span className="iconfont">&#xe64e;&nbsp;最新评论</span>
                <span className="ico-box">
                  <span onClick={this.showTalkBox.bind(this)} className={`iconfont ${roate?'':'roate'}`}>&#xe8b9;</span>
                  <span onClick={this.closeTalkBox.bind(this)} className="iconfont">&#xe61f;</span>
                </span>
              </p>
              <TalkWrapper className={`${roate?'':'yin'}`}>
                <TalkItem>
                  <div className="author-avatar">
                    <img src={imgs} alt="" />
                  </div>
                  <div className="text">近月少女的礼仪汉化补丁v1.2120150307黑兽心愿屋汉化组汉化近月少女的礼仪汉化补丁v1.2120150307黑兽心愿屋汉化组汉化</div>
                </TalkItem>
                <TalkItem className="tlak-option">
                  <div className="author-avatar">
                    <img src={imgs} alt="" />
                  </div>
                  <div className="text">近月少女的礼仪汉化补丁v1.2120150307黑兽心愿屋汉化组汉化近月少女的礼仪汉化补丁v1.2120150307黑兽心愿屋汉化组汉化</div>
                </TalkItem>
              </TalkWrapper>
            </RightWrapper > : ''
        }
      </Fragment>
    )
  }
  showTalkBox() { //展示隐藏评论
    this.setState(val => ({
      roate: !val.roate
    }))// 
  }
  closeTalkBox() { //关闭评论
    this.setState({
      show: false
    })
  }
}

const TalkState = (state) => {
  return {

  }
}

const TalkDispatch = (dispatch) => {
  return {

  }
}

export default connect(TalkState, TalkDispatch)(Talk)